<template>
  <p-card>
    <p-alert message="基础信息" type="info" />
    <p-form-model
      ref="baseInfoData"
      :model="baseInfoData"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <p-row :gutter="24">
        <p-col :span="8">
          <p-form-model-item ref="inspectBillno" label="送检单号" prop="inspectBillno">
            <p-input
              v-model="baseInfoData.inspectBillno"
              @blur="
          () => {
            $refs.inspectBillno.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="productionBillno" label="生产工单" prop="productionBillno">
            <p-input
              v-model="baseInfoData.productionBillno"
              @blur="
          () => {
            $refs.productionBillno.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="processBillno" label="工序工单" prop="processBillno">
            <p-input
              v-model="baseInfoData.processBillno"
              @blur="
          () => {
            $refs.processBillno.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="mcode" label="产品编号" prop="mcode">
            <p-input
              v-model="baseInfoData.mcode"
              @blur="
          () => {
            $refs.mcode.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="mname" label="产品名称" prop="mname">
            <p-input
              v-model="baseInfoData.mname"
              @blur="
          () => {
            $refs.mname.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="processTwo" label="二级工序" prop="processTwo">
            <p-input
              v-model="baseInfoData.processTwo"
              @blur="
          () => {
            $refs.processTwo.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="linename" label="线体" prop="linename">
            <p-input
              v-model="baseInfoData.linename"
              @blur="
          () => {
            $refs.linename.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="deviceCode" label="设备编码" prop="deviceCode">
            <p-input
              v-model="baseInfoData.deviceCode"
              @blur="
          () => {
            $refs.deviceCode.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="inspectTimes" label="检验次数" prop="inspectTimes">
            <p-input
              v-model="baseInfoData.inspectTimes"
              @blur="
          () => {
            $refs.inspectTimes.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="confirmTime" label="确认时间" prop="confirmTime">
            <p-input
              v-model="baseInfoData.confirmTime"
              @blur="
          () => {
            $refs.confirmTime.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="confirmBy" label="确认人员" prop="confirmBy">
            <p-input
              v-model="baseInfoData.confirmBy"
              @blur="
          () => {
            $refs.confirmBy.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="8">
          <p-form-model-item ref="sn" label="sn" prop="sn">
            <p-input
              v-model="baseInfoData.sn"
              @blur="
          () => {
            $refs.sn.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <!-- <p-col :span="24">
                  <p-form-model-item :wrapper-col="{offset: 2 }">
                    <p-button type="primary" @click="onSubmit">Create</p-button>
                    <p-button style="margin-left: 10px;" @click="resetForm">Reset</p-button>
                  </p-form-model-item>
        </p-col>-->
      </p-row>
    </p-form-model>
    <p-alert message="检验项目" type="info" />

    <p-table :columns="tableColumns" :data-source="tableData" :pagination="false" bordered>
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
    </p-table>
    <p-alert message="审批记录" type="info" />

    <p-table :columns="table2Columns" :data-source="table2Data" :pagination="false" bordered>
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
    </p-table>
    <p-alert message="流程处理" type="info" />

    <p-form-model
      ref="processProcessingData"
      :label-col="{span:2}"
      :wrapper-col="{span:12}"
      :model="processProcessingData"
    >
      <p-row :gutter="24">
        <p-col :span="24">
          <p-form-model-item ref="operation" label="操作" prop="operation">
            <p-radio-group v-model="processProcessingData.operation">
              <p-radio value="1">通过</p-radio>
              <p-radio value="2">驳回</p-radio>
            </p-radio-group>
          </p-form-model-item>
        </p-col>
        <p-col :span="24">
          <p-form-model-item
            ref="unqualifiedWorkStation"
            label="检验不合格工站"
            prop="unqualifiedWorkStation"
          >
            <p-select
              v-model="processProcessingData.unqualifiedWorkStation"
              placeholder="please select your zone"
            >
              <p-select-option
                v-for="(item,index) in workStationOptions"
                :key="index"
                :value="item.value"
              >{{item.name}}</p-select-option>
            </p-select>
          </p-form-model-item>
        </p-col>
        <p-col :span="24">
          <p-form-model-item ref="remarks" label="备注" prop="remarks">
            <p-input
              v-model="processProcessingData.remarks"
              type="textarea"
              @blur="
          () => {
            $refs.remarks.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
        <p-col :span="24">
          <p-form-model-item ref="currentProcessor" label="当前处理人" prop="currentProcessor">
            <p-input
              v-model="processProcessingData.currentProcessor"
              @blur="
          () => {
            $refs.currentProcessor.onFieldBlur();
          }
        "
            />
          </p-form-model-item>
        </p-col>
      </p-row>
    </p-form-model>
    <p-button type="primary">提交</p-button>
  </p-card>
</template>

<script>
import { SubmitOnchangMixin } from "@/mixins/SubmitOnchangMixin";
import { httpAction, putAction, api, getAction } from "@/api/manage";
import pick from "lodash.pick";
import JDate from "@/components/jeecg/JDate";
import JSelectUserByDep from "@/components/jeecgbiz/JSelectUserByDep";
import JDictSelectTag from "@/components/dict/JDictSelectTag";
import {
  initDictOptions,
  filterMultiDictText,
} from "@/components/dict/JDictSelectUtil";

export default {
  name: "MesQcInspectTaskModal",
  mixins: [SubmitOnchangMixin],
  components: {
    JDate,
    JSelectUserByDep,
    JDictSelectTag,
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      other: "",
      baseInfoData: {
        inspectBillno: "001", //送检单号
        productionBillno: "", //生产工单
        processBillno: "001", //工序工单
        mcode: "", //产品编号
        mname: "", //产品名称
        processTwo: "", //二级工序
        linename: "", //线体
        deviceCode: "", //设备编码
        inspectTimes: "3", //检验次数
        confirmTime: "2020-01-01", //确认时间
        confirmBy: "", //确认人员
        sn: "", //sn
      },
      rules: {
        inspectBillno: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        productionBillno: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        processBillno: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        mcode: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        mname: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        processTwo: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        linename: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        inspectTimes: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        confirmTime: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        confirmBy: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        sn: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
      },
      tableColumns: [
        //检验项目表格表头
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "工站",
          dataIndex: "workStation",
        },
        {
          title: "检验项目",
          dataIndex: "inspectProject",
        },
        {
          title: "检验标准",
          dataIndex: "inspectStandard",
        },
        {
          title: "值类型",
          // type: 'select',
          // dictCode: 'inspect_value_type',
          dataIndex: "valueType",
          customRender: (text) => {
            if (!text) {
              return "";
            } else {
              return filterMultiDictText(
                this.dictOptions["valueType"],
                text + ""
              );
            }
          },
        },
        {
          title: "检验手段",
          dataIndex: "inspectMethod",
        },
        {
          title: "标准值",
          dataIndex: "standardValue",
        },
        {
          title: "上限值",
          dataIndex: "upperValue",
        },
        {
          title: "下限值",
          dataIndex: "downValue",
        },
        {
          title: "参数",
          dataIndex: "paramValue",
        },
        {
          title: "实测值",
          dataIndex: "measuredValue",
        },
        {
          title: "单项判定",
          dataIndex: "individualJudgment",
          //type: 'select',
          //dictCode: 'mes_individual_judgment',
          /*customRender: (text) => {
                            if (!text) {
                                return ''
                            } else {
                                return filterMultiDictText(this.dictOptions['individualJudgment'], text + "")
                            }
                        },*/
        },
        {
          title: "检验人",
          dataIndex: "judge",
        },
      ],
      tableData: [
        //检验项目表格表体
        {
          rowIndex: "1",
          workStation: "反射板组装",
          inspectProject: "XXX",
          inspectStandard: "XXX",
          valueType: {
            type: "select",
            //dictCode: 'inspect_value_type',
            //dataIndex: 'valueType',
            customRender: (text) => {
              if (!text) {
                return "";
              } else {
                return filterMultiDictText(
                  this.dictOptions["valueType"],
                  text + ""
                );
              }
            },
          },
          inspectMethod: "目测",
          standardValue: "PASS",
          upperValue: "",
          downValue: "",
          paramValue: "",
          measuredValue: "",
          individualJudgment: {
            type: "select",
            customRender: (text) => {
              if (!text) {
                return "";
              } else {
                return filterMultiDictText(
                  this.dictOptions["individualJudgment"],
                  text + ""
                );
              }
            },
          },
          judge: "张三",
        },
      ],
      table2Columns: [
        //审批记录表格表头
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "时间",
          dataIndex: "createTime",
        },
        {
          title: "操作人员",
          dataIndex: "opeBy",
        },
        {
          title: "操作内容",
          dataIndex: "remark",
        },
        {
          title: "状态",
          dataIndex: "opeContent",
        },
      ],
      table2Data: [
        //审批记录表格表体
        {
          rowIndex: "1",
          createTime: "2020-08-11",
          opeBy: "张三",
          remark: "",
          opeContent: "",
        },
      ],
      processProcessingData: {
        //流程处理
        operation: "",
        unqualifiedWorkStation: "",
        remarks: "",
        currentProcessor: "张三",
      },
      workStationOptions: [
        {
          name: "组件预制",
          value: 0,
        },
        {
          name: "组件预制1",
          value: 1,
        },
      ],
      url: {
        select: "/mes-quality/mesQcInspectTask/selectById",
      },
      dictOptions: {
        valueType: [],
        individualJudgment: [],
      },
    };
  },
  computed: {
    count() {
      return this.expand ? 11 : 7;
    },
  },
  updated() {
    console.log("updated");
  },
  created() {
    this.initBasicData();
  },
  methods: {
    // 数据字典查询
    initDictConfig() {
      console.log("数据字典查询 ------>>>>>", res);
      initDictOptions("inspect_value_type").then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, "valueType", res.data);
        }
      });
      initDictOptions("mes_individual_judgment").then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, "individualJudgment", res.data);
        }
      });
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    initBasicData() {
      let that = this;
      let param = {
        id: 1005,
      };
      getAction(that.url.select, param).then((res) => {
        console.log(res);
        let data = res.data;

        this.baseInfoData = data;
        this.tableData = data.mesQcInspectTaskChildList;
        console.log("检验项目：", data.mesQcApproveRecordList);
        console.log("审批结果：", data.mesQcApproveRecordList);
        this.table2Data = data.mesQcApproveRecordList;
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>
<style scoped>
.layout {
  padding: 25px;
}

.title {
  padding: 8px 12px;
  background: #fafafa;
}

.title:not(:first-child) {
  margin-top: 25px;
}
/deep/ .poros-form{
    margin:15px 0;
}
/deep/ .poros-table{
    margin:15px 0;
}
/deep/ .poros-col {
  min-height: 54px;
}
/deep/ .poros-table thead th{
  height:44px;
}
</style>
